// Streaming SSR with selective hydration(选择性水合)
// 像流水一样，打造一个从服务端到客户端持续不断的渲染管线，而不是renderToString那样一次性渲染机制
// 在React18之前，这个操作必须是整体性的，而水合的过程可能比较慢，会引起局部卡顿，所以选择性水合可以在局部进行水合
// 服务端渲染把简单的res.send改为res.socket,这样的渲染就从单次行为转变为持续性行为
// 打破了以前串行的限制，优化前端的加载速度和可交互所需等待时间
// 服务器端的流式HTML使用 renderToPipeableStream
// 客户端的选择性Hydration 使用 <Suspense>

// @babel/register在底层改写了 node 的 require 办法，
// 在代码里引入 @babel/register模块后，所有通过require引入并且以.es6、.es、.jsx、.mjs和.js为后缀名的模块都会被 Babel 转译
const babelRegister = require('@babel/register');
babelRegister({ 
  ignore: [/node_modules/],
  presets: ["@babel/preset-react"],
  plugins: ['@babel/plugin-transform-modules-commonjs'], //转换ES模块为CommonJS
});
const webpack = require('webpack');
const express = require('express');
const static = require('serve-static');
const webpackConfig = require('./webpack.config');
const render = require('./render');
webpack(webpackConfig, (err, stats) => {
  let statsJSON = stats.toJson({ assets: true });
  const assets = statsJSON.assets.reduce((memo, { name }) => {
    memo[name] = `/${name}`
    return memo;
  }, {});
  const app = express();
  app.get('/', async function (req, res) {
    render(req, res, assets);
  });
  app.use(static('build'));
  app.listen(8080, () => console.log('server started on port 8080'));
});